<div class="ama-error-ref-block">

    <div class="adf-property-label">{{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.ERROR' | translate }}</div>
    <button mat-stroked-button data-automation-id="new-error-button" class="ama-add-error-button" (click)="createNewError()"
        matTooltip="{{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.CREATE_NEW_ERROR' | translate }}"
        [matTooltipPosition]="'before'" *ngIf="!attachedIsNotConnector">
        <mat-icon>add</mat-icon>
    </button>

    <mat-form-field>
        <mat-select (selectionChange)="changeErrorRef()" [(ngModel)]="selectedError">

            <ng-container>
                <mat-option></mat-option>
                <mat-option *ngFor="let error of errors" [value]="error">
                    {{ error.name }}
                </mat-option>
            </ng-container>

            <ng-container *ngIf="isStartEvent || !foundExactImplementation">
                <ng-container *ngFor="let group of errorsGroups">
                    <mat-optgroup *ngIf="group.errors?.length > 0" [label]="group.name" >
                        <mat-option *ngFor="let error of group.errors" [value]="error">
                            {{ error.name }}
                        </mat-option>
                    </mat-optgroup>
                </ng-container>
            </ng-container>

        </mat-select>
    </mat-form-field>

    <div *ngIf="selectedError">
        <mat-form-field>
            <div class="adf-property-label">{{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.ERROR_NAME' | translate }}</div>
            <input matInput (change)="changeErrorRef()" [(ngModel)]="selectedError.name"
                [disabled]="parentIsConnector" />
        </mat-form-field>

        <mat-form-field>
            <div class="adf-property-label">{{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.ERROR_CODE' | translate }}</div>
            <input matInput (change)="changeErrorRef()" [(ngModel)]="selectedError.errorCode"
                [disabled]="parentIsConnector" />
        </mat-form-field>
    </div>

</div>
